<template>
  <div class="zt">
    <van-sticky>
      <div class="dh">
        <van-tabs v-model="tabsName">
          <van-tab title="推荐" name="a"></van-tab>
          <van-tab title="活动" name="b" to="/home/indexV/activity"></van-tab>
        </van-tabs>
      </div>
      <!-- 搜索 -->
      <div>
        <van-search @click="$router.push('/search')" shape="round" placeholder="请输入搜索关键词" />
      </div>
    </van-sticky>
    <!-- 圆球 -->
    <div class="kp">
      <div v-for="item in sport" :key="item.id">
        <div class="item" :style="`background-color:${item.color}`">
          <!-- <van-icon name="music" /> -->
          <img :src="base + item.pic" alt="" />
        </div>
        <p>{{ item.name }}</p>
      </div>
    </div>
    <!-- 卡片 -->
    <div class="card">
      <div class="card-1" @click="$router.push('/index/allcourse')">
        <div>
          <b>全部课程</b>
          <p>分类·排行·详情</p>
        </div>
        <div>
          <img src="../../assets/1.jpg" alt="" />
        </div>
      </div>

      <div class="card-1">
        <div>
          <b>更多内容</b>
          <p>我杨胖最胖！</p>
        </div>
        <div class="card-2">
          <img src="../../assets/1.jpg" alt="" />
        </div>
      </div>
    </div>
    <!-- 精选 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

      <div class="tab-container" id="tabContainer">
        <div class="tab-item" v-for="item in list" :key="item.pid" @click="$router.push(`/index/detail/${item.pid}`)">
          <div class="img">
            <img :src="base + item.pic" />
            <div class="img-1">
              <div>
                <span class="d1">k2</span>
                <b>
                  <van-icon name="user-o" size="10" />
                  {{ (item.watch * 0.001).toFixed(1) }}万
                </b>
              </div>
              <p class="d2">{{ item.duration }}分钟</p>
            </div>
          </div>
          <div class="content-1">
            <p class="content">{{ item.title }}</p>
            <div class="tips">
              <span class="w1">官方精品</span>

              <span class="w2">"{{ item.detail }}"</span>
              <span class="tb">
                <van-icon name="manager" />
              </span>
              <p class="wz-3">爱跑步的keep君</p>
              <van-icon size="20px" name="good-job-o" />
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { base } from "@/service/index";
import httpApi from "@/http";
import { Toast } from "vant";

export default {
  data() {
    return {
      base,
      tabsName: "a",
      sport: "",
      list: "",
      isLoading: false
      //瀑布流数据
    };
  },
  mounted() {
    this.courseAll();
    this.sportType();
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.courseAll();

      }, 1000);
    },
    // 所有课程
    courseAll() {
      // let params = {page:1,pagesize:20}
      httpApi.courseApi.courseAll({}).then((res) => {
        console.log("数据2", res);
        this.list = res.data.data;
      });
    },
    // 运动类型
    sportType() {
      // let params = { page: 1, pagesize: 5 };
      httpApi.sportApi.sportType().then((res) => {
        console.log("数据", res);
        this.sport = res.data.data;
      });
    },
  },
};
</script>

<style>
.dh .van-tabs__line {
  background-color: black;
}

.kp {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.kp .item {
  display: inline-block;
  width: 55px;
  height: 45px;
  border-radius: 45px;
  position: relative;
}

.kp .item img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20%;
  left: 25%;
  color: white;
}

.kp p {
  text-align: center;
}

.card {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.card .card-1 {
  width: 170px;
  /* height: 80px; */
  padding: 20px 5px 20px 0px;
  background-color: rgb(251, 250, 255);
  border-radius: 10px;
  box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0, 0.5);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card .card-1 b,
p {
  font-size: 12px;
}

.card .card-1 b {
  margin-top: 20px;
  font-size: 16px;
}

.card .card-1 p {
  color: #999;
}

.card .card-1 img {
  width: 50px;
  height: 40px;
  object-fit: cover;
  border-radius: 10px;
}

/* 最外层大盒子 */
.tab-container {
  margin: 10px;
  column-fill: balance;
  column-count: 2;
  column-gap: 1;
}

/* 每个小盒子 */
.tab-container .tab-item {
  overflow: auto;
  height: auto;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: white;
  margin-bottom: 10px;
}

.tab-container .tab-item img {
  width: 100%;
}

.content-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  text-align: left;
  color: #5c5c5c;
  font-size: 16px;
  margin-top: 10px;
  padding: 0 10px 0 10px;
}

.tab-container .tab-item .img {
  position: relative;
}

.tab-container .tab-item .img-1 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 10px;
}

.tab-container .tab-item .d1 {
  display: inline-block;
  color: white;
  width: 20px;
  height: 20px;
  background-color: rgb(133, 110, 252);
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  margin-right: 5px;
}

.tab-container .tab-item b {
  font-weight: 100;
  color: white;
  font-size: 12px;
}

.tab-container .tab-item .d2 {
  display: inline-block;
  font-size: 12px;
  color: white;
  margin-left: 20px;
}

.tab-container .tab-item .tips {
  position: relative;
}

.tab-container .tab-item .tips .w1 {
  display: inline-block;
  font-size: 12px;
  border-radius: 5px;
  color: white;
  background-color: rgb(103, 96, 112);
  width: 70px;
  height: 25px;
  line-height: 25px;
  letter-spacing: 0.2em;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.tab-container .tab-item .tips .w2 {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.2em;
  width: 150px;
  margin-left: 10px;
  margin-top: 0px;
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: rgb(233, 250, 244);
  color: rgb(141, 197, 178);
  /* //对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* //溢出隐藏 */
  overflow: hidden;
  /* //设置伸缩盒子对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
  /* //设置 块元素包含的文本行数 */
  -webkit-line-clamp: 1;
}

.tab-container .tab-item .tips .tb {
  width: 25px;
  height: 25px;
  background-color: rgb(114, 201, 172);
  border-radius: 50%;
  position: absolute;
  left: 10px;
  bottom: 15px;
}

.tab-container .tab-item .tips .tb .van-icon {
  position: absolute;
  left: 5px;
  top: 3px;
}

.tab-container .tab-item .tips .wz-3 {
  display: inline-block;
  font-size: 12px;
  margin-bottom: 20px;
  margin-left: 40px;
  margin-top: -10px;
}

.tab-container .tab-item .tips .van-icon {
  position: absolute;
  right: 5px;
}
</style>
